<template>
	<view>

		<!-- 导航栏 -->
		<u-navbar v-if="finalNavbarObject.show" :title="finalNavbarObject.title"
			:title-size="finalNavbarObject.titleSize" :is-back="finalNavbarObject.isBack"
			:back-icon-name="finalNavbarObject.backIconName" :back-text="finalNavbarObject.backText" :height="finalNavbarObject.height">
			<view v-if="finalNavbarObject.rightText" slot="right" class="navbar-right">{{finalNavbarObject.rightText}}</view>
		</u-navbar>

		<view class="card-region"
			:class="consumeList.card_type == '104'?'V1':consumeList.card_type == '101'?'V2':consumeList.card_type == '102'?'V3':consumeList.card_type == '103'?'V4':''">
			<view class="level">{{consumeList.level_name}}</view>
			<view class="level-expiry">
				<!-- 2025-01-01，降级 -->
				{{(consumeList.level_name == '微会员' || consumeList.level_name == '金卡')
        ? `永久有效`
        : `${consumeList.expireDate}，降级`}}
				<u-icon name="error-circle" class="icon-error" @click="gradePopup = true"></u-icon>
			</view>

			<view class="spending-container">
				<view @click="expendPopup = true">
					消费值 {{consumeList.totalUpgradeSpending}}
					<u-icon name="arrow-right" class="icon-arrow"></u-icon>
				</view>
				<!-- #D0B07F -->
				<u-line-progress inactive-color="#fff"
					:active-color="consumeList.card_type == '104'?'#BBBDCF':consumeList.card_type == '101'?'#D0B07F':consumeList.card_type == '102'?'#CC7772':consumeList.card_type == '103'?'#1F1F1F':''"
					:percent="consumeList.percentage" height="20" :striped="true"></u-line-progress>
			</view>
		</view>

		<view class="membership-rights">
			<u-line color="#606266" :hair-line="false" />
			<view class="membership-text">{{ consumeList.level_name }} 享有会员权益</view>
			<u-line color="#606266" :hair-line="false" />
		</view>

		<view>
			<u-grid :col="4" :border="false">
				<u-grid-item bg-color="#f2f2f2" v-for="(item, index) in equityList" :key="index"
					v-if="item.id.includes( (current +1).toString())" @click="popupEquity(item)">
					<u-icon :name="item.equityImg" :size="100"></u-icon>
					<view class="grid-text">{{ item.equityName }}</view>
				</u-grid-item>
			</u-grid>
		</view>

		<view>
			<u-popup v-model="popupEquityShow" mode="center" :mask-close-able="false" border-radius="10" width="500rpx">
				<view class="equity">
					<u-icon :name="popupEquityData.equityImg" :size="100"></u-icon>
					<view class="equityName">{{popupEquityData.equityName}}</view>
					<rich-text :nodes="popupEquityData.equityContent"></rich-text>
				</view>
				<view class="colse" @click="closePopup">关闭</view>
			</u-popup>
		</view>

		<!-- 会员等级 -->
		<view>
			<u-popup v-model="gradePopup" mode="center" :mask-close-able="false" border-radius="10" width="650rpx">
				<view class="equity">
					<u-parse :html="getHtmlImgUrl(gradeParse)"></u-parse>
				</view>
				<view class="colse" @click="gradePopup = false">我知道了</view>
			</u-popup>
		</view>
		<!-- 消费值 -->
		<view>
			<u-popup v-model="expendPopup" mode="bottom" :mask-close-able="false" border-radius="10">
				<view class="expend-popup-content">
					<view class="popup-close">
						<u-icon name="close" @click="expendPopup = false"></u-icon>
					</view>
					<view>
						<view class="popup-title">上次升级后累计消费值</view>
						<view>{{consumeList.totalUpgradeSpending}}</view>
					</view>
					<view style="margin: 20rpx 0;">
						<u-line border-style="dashed" color="#606266" :hair-line="false"></u-line>
					</view>

					<view class="popup-info">
						<view>{{consumeList.level_name}}</view>
						<view v-if="consumeList.totalNextSpending"> {{consumeList.card_type == '104'? '今日消费' : '累计消费'}}
							<text
								class="spending-amount">{{ consumeList.card_type == '104'? totalday() : consumeList.totalNextSpending }}</text>元
						</view>
						<view>{{consumeList.nextLeveName}}</view>
					</view>
					<u-line-progress inactive-color="#f2f2f2"
						:active-color="consumeList.card_type == '104'?'#BBBDCF':consumeList.card_type == '101'?'#D0B07F':consumeList.card_type == '102'?'#CC7772':consumeList.card_type == '103'?'#1F1F1F':''"
						:percent="consumeList.card_type == '104'?totaldaypercentage() : consumeList.percentage"
						height="20" :show-percent="false"></u-line-progress>

					<view class="popup-next" v-if="consumeList.card_type !== '103' && consumeList.card_type !== '104' ">
						<view>今日消费<text
								class="today-spending">{{consumeList.totalNextToday}}</text>元，明日可升级{{consumeList.nextLeveName}}会员
						</view>
						<!-- <view>当前累计在消费 <text style="color: #f56c6c;margin: 0 10rpx;">{{consumeList.totalNextSpending}}</text>元,可升级金卡会员</view> -->
					</view>


					<view class="call-to-action">
						去消费
					</view>
				</view>

			</u-popup>
		</view>
	</view>
</template>

<script>
	/**
	 * ---------------导航栏区域参数---------------
	 * @property {Object} navbarObject 导航栏参数
	 * show {Boolean} 导航栏是否显示
	 * isBack {Boolean} 是否显示导航栏左边返回图标和辅助文字
	 * titleSize {Number} 导航栏标题字体大小，单位rpx
	 * backIconName {String} 左边返回图标的名称，只能为uView自带的图标
	 * backText {String} 返回图标右边的辅助提示文字
	 * -------------------------------------------
	 **/
	export default {
		props: {
			// 导航栏
			navbarObject: {
				type: Object,
				required: false, // 改为非必填
			}
		},
		data() {
			return {
				expendPopup: false,
				gradeParse: `规则`,
				// 等级弹窗
				gradePopup: false,
				popupEquityData: {},
				popupEquityShow: false,
				equityList: [{
						id: ['4'],
						equityImg: '../../../static/logo.png',
						equityName: '生日积分',
						equityContent: `生日当月消费享2倍积分`
					},
					{
						id: ['1', '2', '3', '4'],
						equityImg: '../../../static/logo.png',
						equityName: '积分兑换',
						equityContent: '可享受积分兑换精美礼品'
					}, {
						id: ['1', '2', '3', '4'],
						equityImg: '../../../static/logo.png',
						equityName: '会员活动',
						equityContent: `会员专享定期活动`
					},
					{
						id: ['2', '3', '4'],
						equityImg: 'status/img/rights4.png',
						equityName: '礼品包装',
						equityContent: `精品包装服务`
					},
					{
						id: ['3', '4'],
						equityImg: '../../../static/logo.png',
						equityName: '贵宾厅服务',
						equityContent: `每日每卡限免费入厅1次`
					},
					{
						id: ['1', '2', '3', '4'],
						equityImg: '../../../static/logo.png',
						equityName: '停车优惠',
						equityContent: ``
					}
				],
				current: 0,

				consumeList: {
					card_type: '104',
					level_name: '微会员',
					expireDate: '9999-12-31',
					totalUpgradeSpending: 0,
					percentage: 0,
					nextLeveName: '金卡',
					totalNextToday: 0
				}
			}
		},
		computed: {
			// 最终导航栏参数配置
			finalNavbarObject() {
				return {
					show: true, //是否显示导航栏
					isBack: true, //是否显示导航栏左边返回图标和辅助文字 默认 true
					titleSize: 30, //导航栏标题字体大小，单位rpx 默认44
					backIconName: '', //左边返回图标的名称，只能为uView自带的图标 默认	nav-back
					backText: '', //返回图标右边的辅助提示文字
					...this.navbarObject
				}
			}
		},
		onLoad() {},
		methods: {
			// 权益弹窗关闭
			closePopup() {
				this.popupEquityShow = false
				uni.showTabBar()
			},
			totalday() {

				const total = 500 - Math.floor(this.consumeList.totalSpendingToday)
				if (total < 0) {
					return this.consumeList.totalSpendingToday
				}
				return total
			},
			totaldaypercentage() {

				const percentage = (Math.floor(this.consumeList.totalSpendingToday) / 500) * 100
				return percentage
			},
			// 权益弹窗打开
			popupEquity(item) {
				if (item.equityName == "停车优惠") {
					if (this.current == 0 || this.current == 1) {
						item.equityContent = `<p>当日消费满200元，<br/>
				<span>即可申领30元停车满减券</span></p>`
					} else if (this.current == 2) {
						item.equityContent = `<p>每月赠200元停车满减券</p>
				<br/>
				<p>当日消费满200元，<br/>
				<span>即可申领30元停车满减券</span></p>`
					} else if (this.current == 3) {
						item.equityContent = `<p>每月赠300元停车满减券</p>
				<br/>
				<p>当日消费满200元，<br/>
				<span>即可申领30元停车满减券</span></p>`
					}
				}
				this.popupEquityData = item
				this.popupEquityShow = true
				uni.hideTabBar()
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f2f2f2;
	}

	.navbar-right {
		margin-top: 70rpx;
		margin-right: -120rpx;
	}

	.card-region {
		margin: 20rpx 20rpx;
		border-radius: 10rpx;
		padding: 0 30rpx;
		padding-top: 60rpx;
		height: 360rpx;

		.level {
			font-size: 50rpx;
			font-weight: bold;
		}

		.level-expiry {
			font-size: 30rpx;

			.icon-error {
				margin-left: 10rpx;
			}
		}

		.spending-container {
			margin-top: 90rpx;

			.icon-arrow {
				margin-left: 10rpx;
			}
		}
	}

	.V1 {
		background: url();
		background-size: 100% 100%;
		background-repeat: repeat;
		background-position: center;
		background-size: cover;
		color: #383E60;
	}

	.V2 {
		background: url();
		background-size: 100% 100%;
		background-repeat: repeat;
		background-position: center;
		background-size: cover;
		color: #826332;
	}

	.V3 {
		background: url();
		background-size: 100% 100%;
		background-repeat: repeat;
		background-position: center;
		background-size: cover;
		color: #871B13;
	}

	.V4 {
		background: url();
		background-size: 100% 100%;
		background-repeat: repeat;
		background-position: center;
		background-size: cover;
		color: #FEFEFE;
	}

	.membership-rights {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin: 0 20rpx;
		margin-top: 20rpx;

		.membership-text {
			margin: 0 20rpx;
		}
	}

	.equity {
		padding: 60rpx 60rpx 40rpx 60rpx;
		background-color: #fff;
		text-align: center;

		.equityName {
			font-size: 40upx;
			font-weight: bold;
			margin: 20upx;
		}
	}

	.colse {
		border-top: 1px solid #ebebeb;
		background-color: #fff;
		text-align: center;
		line-height: 80upx;
	}

	.expend-popup-content {
		margin: 20rpx 30rpx;

		.popup-close {
			text-align: right;
		}

		.popup-title {
			font-size: 30rpx;
		}

		.popup-info {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 0;

			.spending-amount {
				color: #f56c6c;
			}
		}

		.popup-next {
			margin: 20rpx 0;

			.today-spending {
				color: #f56c6c;
				margin: 0 10rpx;
			}
		}

		.call-to-action {
			border: 1px solid #909399;
			text-align: center;
			padding: 20rpx 0;
			border-radius: 50rpx;
			font-size: 30rpx;
			margin: 40rpx 0;
		}
	}
</style>